<script setup lang="ts">
import { usePubListStore } from '@/stores/publist'

const usePubList = usePubListStore()
const closePopup = () => {
    usePubList.showPubList = false
}
</script>

<template>
    <fui-bottom-popup :show="usePubList.showPubList" @close="closePopup">
        <view
            class="publish"
            :style="{
                backgroundImage: `url(${$getImg('/img/icon/publish/pubBg.png')})`,
                backgroundSize: 'cover'
            }"
        >
            <view class="title-box">
                <view class="title">发布</view>
                <view class="subtitle">请发布帖子展示你的资源或提出你都需求吧</view>
            </view>
            <view class="pub-type flex-row">
                <view
                    class="sub-box flex-center-column"
                    @click="$jump('/views/subViews/post/newPostOrVideo/index?type=1')"
                >
                    <image mode="widthFix" :src="$getImg('/img/icon/publish/pubpost.png')"></image>
                    帖子
                </view>

                <view
                    class="sub-box flex-center-column"
                    @click="$jump('/views/subViews/post/newPostOrVideo/index?type=2')"
                >
                    <image mode="widthFix" :src="$getImg('/img/icon/publish/pubvideo.png')"></image>
                    视频
                </view>
            </view>
            <view class="close flex-center">
                <image
                    mode="widthFix"
                    :src="$getImg('/img/icon/publish/close.png')"
                    @click="usePubList.showPubList = false"
                ></image>
            </view>
        </view>
    </fui-bottom-popup>
</template>

<style scoped lang="scss">
.publish {
    height: 100vh;
}

.title-box {
    padding: 30vh 40rpx 0;

    .title {
        font-size: 26px;
        font-weight: 700;
        color: #292d32;
    }

    .subtitle {
        font-size: 14px;
        color: #3d3d3d;
        padding-top: 30rpx;
    }
}

.close {
    margin-top: 40rpx;

    image {
        width: 30rpx;
    }
}

.pub-type {
    margin-top: 100rpx;
    padding: 60rpx;
    gap: 30rpx;

    .sub-box {
        background: #ffffff;
        border-radius: 32rpx;
        box-shadow: 0px 10px 15px -3px rgba(55, 106, 247, 0.1),
            0px 4px 6px -2px rgba(55, 215, 247, 0.1);
        padding: 40rpx;
        flex: 1;
        height: 440rpx;
        font-size: 16px;
        font-weight: 700;
        gap: 20rpx;
    }

    image {
        width: 140rpx;
    }
}
</style>
